<template>
	<view>
		<uni-section style="margin: 0;" title="您的身份" type="line" :sub-title="info.time?'有效至：'+info.time:''">
			{{info.roleName}}
		</uni-section>
		<view style="margin:5px;">
			<uni-grid :column="2">
				<uni-grid-item v-if='$auth.hasRole("ordinary")'>
					<view @click="index='member'" class="grid-item-box"
						:style="{'background-color': (index == 'member'?'#dde6fc':'')}">
						<uni-icons type="person-filled" :size="50" color="#00aaff" />
						<text class="text_">升级为队员</text>
						<text class="text">年费￥：{{zeroTwo(info.member)}}</text>
					</view>
				</uni-grid-item>
				<uni-grid-item v-if='$auth.hasRoleOr(["ordinary","member"])'>
					<view @click="index='captain'" class="grid-item-box"
						:style="{'background-color': (index == 'captain'?'#dde6fc':'')}">
						<uni-icons type="person-filled" :size="50" color="#00aaff" />
						<text class="text_">升级为队长</text>
						<text class="text">年费￥：{{zeroTwo(info.captain)}}</text>
					</view>
				</uni-grid-item>
				<uni-grid-item v-if='$auth.hasRoleOr(["ordinary","member","captain"])'>
					<view @click="index='region'" class="grid-item-box"
						:style="{'background-color': (index == 'region'?'#dde6fc':'')}">
						<uni-icons type="personadd-filled" :size="50" color="#0055ff" />
						<text class="text_">升级为区域队长</text>
						<template v-if="info.regionEffectiveTime">
							<text class="text">您的注册区域已有区域队长</text>
							<text class="text">有效时间至：{{info.regionEffectiveTime}}</text>
						</template>
						<text class="text" v-else>年费￥：{{zeroTwo(info.region)}}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>

		<view style="margin:5px;">
			<view style="text-align: center;" v-if='$auth.hasRole("region")'>您已经是顶级身份！无需再升级。</view>
			<button v-else type="primary" @click="confirmUpgrade">{{index?'￥'+zeroTwo(info[index]):''}} 支付升级</button>
		</view>
	</view>
</template>

<script>
	import {
		upgrade,
		upgradePay
	} from '@/api/my'

	import {
		state
	} from '@/api/jinjian.js'

	export default {
		data() {
			return {
				index: undefined,
				info: {
					roleName: "",
					member: null,
					captain: null,
					region: null,
					regionEffectiveTime: null,
					time: null,

					orderNo: undefined
				}
			}
		},
		onLoad() {
			upgrade().then(res => {
				this.info = res
			})
		},
		methods: {
			confirmUpgrade() {
				if (!this.index) {
					this.$modal.msgError("请选择升级身份")
					return
				}
				if (this.index == 'region' && this.info.regionEffectiveTime) {
					this.$modal.msgError("您的注册区域已有区域队长")
					return
				}
				this.$modal.confirm("升级后请重新登录!").then(res => {
					console.log(res)
					if (res) {
						this.$modal.loading("正在发起支付")
						upgradePay({
							roleKey: this.index,
							payType: 'alipaysign'
						}).then(res => {

							let data = res.data
							console.log('----data---', data)
							this.orderNo = data.orderNo
							// 轮询逻辑
							let this_ = this
							this.intervalwx = window.setInterval(() => {
								state(this_.orderNo).then(res => {
									console.log(res)
									if (res == 'SUCCESS') {
										this_.$store.dispatch('LogOut').then(() => {
											this_.$tab.reLaunch('/pages/index')
										})
										clearInterval(this_.intervalwx)
										this_.intervalwx = undefined
									}
								})
							}, 1800)

							this.$modal.closeLoading()
							if (data.code == 200) {
								const payUrl = data.data.payUrl
								// window.location.href = payUrl
							} else {
								this.$modal.msgError(data.msg)
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.image {
		width: 25px;
		height: 25px;
	}

	.text_ {
		font-size: 18px;
		margin-top: 5px;
	}

	.text {
		font-size: 15px;
		margin-top: 5px;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}
</style>